<template>
  <div
    :class="['top-bar', { shadow: shadow }]"
    :style="[
      { backgroundColor: backgroundColor },
      { top: vueState.pageStyle.statusBarHeight + 'px' },
    ]"
  >
    <slot name="title"></slot>
    <div v-if="showLeft" class="left" @click="clickLeft">
      <div :class="['icon', iconColor]"></div>
    </div>
    <div class="right" @click="clickRight">
      <slot name="right"> </slot>
    </div>
  </div>
</template>
<script>
import {inject} from 'vue'
import { useRouter } from "vue-router";
export default {
  props: {
    showLeft: {
      default: true,
    },
    backgroundColor: {
      default: "white",
    },
    iconColor: {
      default: "black",
    },
    shadow: {
      default: false,
    },
    leftClickHandler:{
      type:Function
    }
  },
  setup(props, ctx) {
    const vueState = inject('vueState')
    const router = useRouter();
    const clickLeft = () => {
      props.leftClickHandler ? props.leftClickHandler() : router.back()
    };
    const clickRight = () => {
      ctx.emit("clickRight");
    };
    return {
      clickLeft,
      clickRight,
      vueState,
    };
  },
};
</script>
<style lang="less" scoped>
.top-bar {
  z-index: 9;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.48rem;
  width: 100%;
  background-color: white;
  // box-shadow: 0 .08rem .11rem 0 rgba(246,247,249,1);
  font-size: 0.18rem;
  font-weight: 500;
  color: #121314;
  &.shadow {
    box-shadow: 0 0.08rem 0.16rem 0 rgba(10, 36, 99, 0.02);
  }
  .left {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.16rem;
    .icon {
      height: 0.24rem;
      width: 0.24rem;
      background: url(../../assets/images/return.png) no-repeat center;
      background-size: contain;
      &.white {
        background: url(../../assets/images/white_arrow.png) no-repeat center;
        background-size: contain;
      }
    }
  }
  .right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.16rem;
  }
}
</style>
